<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .content{
        //设置flex 布局
        display: flex;
        //设置主轴方式
        flex-direction: row;
        //设置项目在主轴上对齐方式
        justify-content: flex-end;
        //主轴上是否换行
        flex-wrap: wrap;
        // flex-direction +flex-wrap 的缩写
        flex-flow: row wrap;
        /*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/
        align-content: space-between;
        /*align-items属性定义项目在交叉轴上如何对齐*/
        align-items: center;

    }
</style>
<body>
<div class="content">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>